<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>Document</title>
        <style>
            * { box-sizing: border-box; }

            /* force scrollbar */
            html { overflow-y: scroll; }

            body {
              font-family: sans-serif;
            }

            /* ---- isotope ---- */

            .grid {
              background: #DDD;
            }

            /* clear fix */
            .grid:after {
              content: '';
              display: block;
              clear: both;
            }

            /* ---- .grid-item ---- */

            .grid-sizer,
            .grid-item {
              width: 33.333%;
            }

            .grid-item {
              float: left;
            }

            .grid-item img {
              display: block;
              max-width: 100%;
            }

        </style>
    </head>
    <body>
        <h1>Isotope - imagesLoaded callback</h1>

        <div class="grid">
          <div class="grid-sizer"></div>
          <div class="grid-item">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/orange-tree.jpg" />
          </div>
          <div class="grid-item">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" />
          </div>
          <div class="grid-item">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/look-out.jpg" />
          </div>
          <div class="grid-item">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/one-world-trade.jpg" />
          </div>
          <div class="grid-item">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/drizzle.jpg" />
          </div>
          <div class="grid-item">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/cat-nose.jpg" />
          </div>
          <div class="grid-item">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/contrail.jpg" />
          </div>
          <div class="grid-item">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/golden-hour.jpg" />
          </div>
          <div class="grid-item">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/flight-formation.jpg" />
          </div>
        </div>

        <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <script src="js/isotope.pkgd.min.js"></script>
        <script src="js/imagesloaded.pkgd.js"></script>
        <script>
        // init Isotope after all images have loaded
        var $grid = $('.grid').imagesLoaded( function() {
          $grid.isotope({
            itemSelector: '.grid-item',
            percentPosition: true,
            masonry: {
              columnWidth: '.grid-sizer'
            }
          });
        });  
        </script>
    </body>
</html>